<template>
  <ele-page>
    <!-- 搜索表单 -->
    <search @search="reload" :wating-data="watingData" :where="defaultWhere" />
    <ele-card :body-style="{ paddingTop: '8px' }">
      <!-- 表格 -->
      <ele-pro-table
        ref="tableRef"
        row-key="userId"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        v-model:selections="selections"
        highlight-current-row
        border
        stripe
        :where="defaultWhere"
      >
        <template #site="{ row }">
          {{ row.id }} <br />
          {{ row.site }}
        </template>
        <template #amount="{ row }">
          {{ row.amount }} <br />
          {{ row.cost_date }}
        </template>
        <template #cate="{ row }">
          {{ row.cate }} <br />
          {{ row.project }}
        </template>
        <template #create="{ row }">
          {{ row.create_user }} <br />
          {{ row.create_time }}
        </template>
        <template #account="{ row }">
          {{ row.pay_account_bank }}<br />
          {{ row.pay_account_realname }}<br />
          {{ row.pay_account }}
        </template>
        <template #rejudge="{ row }">
          {{ row.rejudge_user }}<br />
          {{ row.rejudge_time }}
        </template>
        <template #double_judge="{ row }">
          {{ row.double_judge_user }}<br />
          {{ row.double_judge_time }}
        </template>
        <template #judge="{ row }">
          {{ row.judge_user }}<br />
          {{ row.judge_time }}
        </template>
        <template #pay="{ row }">
          {{ row.pay_user }}<br />
          {{ row.pay_time }}
        </template>
        <template #status="{ row }">
          <span v-if="row.status === '/'">/</span>
          <div v-else>
            <el-tag
              v-if="row.wechat_res_status !== 2"
              :type="statusFilter(row.status)"
            >
              {{ statusText(row.status) }}
            </el-tag>
            <el-tag v-else type="danger">打款失败</el-tag>
          </div>
        </template>

        <template #toolbar="{}">
          <el-button type="success" @click="exportExcel" :icon="DocumentCopy">
            导出表格
          </el-button>
        </template>

        <template #action="{ row }">
          <span v-if="row.status === 9999">/</span>
          <el-button-group v-else>
            <el-button type="primary" size="small" @click="openImages(row)"
              >查看凭证</el-button
            >
          </el-button-group>
        </template>
      </ele-pro-table>
    </ele-card>
    <!-- 审核 -->
    <judge
      v-model="showJudge"
      :data="current"
      :pass-status="passStatus"
      type="judge"
      @done="reload"
    />
    <!-- 查看凭证 -->
    <images v-model="showImages" :images-list="imagesList" />
  </ele-page>
</template>

<script setup>
  import { ref, computed } from 'vue';
  import Search from './search.vue';
  import { DocumentCopy } from '@element-plus/icons-vue';

  import Images from '@/components/ImagesList/index.vue';
  import { pageOaCost, payCost, exportOaCostList } from '@/api/oa';
  import { EleMessage } from 'ele-admin-plus/es';
  import { ElMessageBox } from 'element-plus/es';

  const props = defineProps({
    defaultWhere: Object
  });
  /** 表格实例 */
  const tableRef = ref(null);

  /** 表格列配置 */
  const columns = computed(() => {
    const cols = [
      {
        slot: 'site',
        label: '城市',
        width: 95,
        align: 'center'
      },
      {
        slot: 'status',
        label: '状态',
        align: 'center',
        width: 110
      },
      {
        prop: 'cate',
        align: 'center',
        label: '分类',
        width: 130
      },
      {
        prop: 'project',
        align: 'center',
        label: '项目',
        width: 130
      },
      {
        slot: 'amount',
        align: 'center',
        width: 130,
        prop: 'amount',
        label: '金额/费用日期'
      },

      {
        prop: 'note',
        label: '说明',
        width: 150
      },
      {
        prop: 'pay_note',
        label: '资金需求时间',
        width: 120,
        align: 'center'
      },
      {
        prop: 'amount',
        label: '金额',
        width: 90,
        align: 'center'
      }
    ];

    if (status.value > 1 || status.value < 9) {
      cols.push({
        slot: 'account',
        label: '收款账号',
        width: 200,
        align: 'center'
      });
    }

    if (status.value === 9) {
      cols.push({
        prop: 'judge_content',
        label: '拒绝原因'
      });
    }

    cols.push({
      slot: 'create',
      align: 'center',
      label: '申请人/时间',
      width: 120
    });

    if (status.value > 0) {
      cols.push({
        slot: 'rejudge',
        width: 110,
        align: 'center',
        label: '财务审核'
      });
      cols.push({
        slot: 'double_judge',
        width: 110,
        align: 'center',
        label: '财务主管审核'
      });
      cols.push({
        slot: 'judge',
        width: 110,
        align: 'center',
        label: '经理审核'
      });
      cols.push({
        slot: 'pay',
        width: 110,
        align: 'center',
        label: '打款'
      });
    }

    cols.push({
      columnKey: 'action',
      label: '操作',
      slot: 'action',
      minWidth: 100
    });
    return cols;
  });

  /** 表格选中数据 */
  const selections = ref([]);

  const watingData = ref([]);

  const statusText = (value) => {
    const cs = {
      9: '未通过',
      8: '已完成',
      2: '待打款',
      1: '待经理审核',
      0: '待财务审核',
      11: '主管审核',
      '/': ''
    };
    return cs[value];
  };
  const statusFilter = (status) => {
    const statusMap = {
      9: 'danger',
      2: 'success',
      1: 'warning',
      11: 'warning',
      0: 'info'
    };
    return statusMap[status];
  };
  /** 查看图片 */
  const imagesList = ref([]);
  const showImages = ref(false);
  const openImages = (row) => {
    imagesList.value = row.imagesArr ?? [];
    showImages.value = true;
  };

  /** 表格数据源 */
  const datasource = async ({ page, limit, where, orders }) => {
    const result = await pageOaCost({ ...where, ...orders, page, limit });
    console.log('result:', result);
    watingData.value = result.watingData;
    console.log('watingData', watingData.value);
    return result;
  };
  /** 导出表格 */
  const exportExcel = () => {
    const loading = EleMessage.loading('请求中..');
    tableRef.value?.fetch(({ where }) => {
      // 方法的参数与数据源的完全一致
      // 请求查询全部接口
      console.log(where);
      var requestData = where;
      requestData.limit = 99999999;
      requestData.page = 1;

      exportOaCostList(requestData)
        .then((res) => {
          loading.close();
          window.open(res);
        })
        .catch(() => {
          loading.close();
        });
    });
  };

  const status = ref(0);
  /** 搜索 */
  const reload = (where) => {
    status.value = where ? where.status : 0;
    selections.value = [];
    tableRef.value?.reload?.({ page: 1, where });
  };

  /** 审核 */
  const current = ref(null);
  const passStatus = ref(null);
  const showJudge = ref(false);
  const openJudge = (row, status) => {
    showJudge.value = true;
    current.value = row ?? null;
    passStatus.value = status;
  };

  // 打款
  const setStatus = (row) => {
    const title = '已打' + row.amount + '元报销费用给' + row.create_user;

    ElMessageBox.confirm(title, '系统提示', {
      type: 'warning',
      draggable: true
    })
      .then(() => {
        const loading = EleMessage.loading('请求中..');
        var requestData = {
          id: row.id
        };
        payCost(requestData)
          .then(() => {
            loading.close();
            EleMessage.success('操作成功');
            reload();
          })
          .catch((e) => {
            loading.close();
            EleMessage.error(e.message);
          });
      })
      .catch(() => {});
  };
</script>

<script>
  export default {
    name: 'SystemUser'
  };
</script>
